import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/main/Home.vue'
import Mine from '../views/main/Mine.vue'
import Main from '../views/Main.vue'
import HelloWorld from '../components/HelloWorld.vue'
import ArticleList from '../views/article/ArticleList.vue'
import ArticleDetail from '../views/article/ArticleDetail.vue'
import Reward from '../views/reward/Reward.vue'
import Edit from '../views/edit/Edit.vue'
import Logon from '../views/Logon.vue'
import Search from '../views/search/Search.vue'
import Login from '../views/login/Login.vue'
import Register from '../views/login/Register.vue'

import UserInfo from '../views/user/UserInfo.vue'
import UserHome from '../views/user/UserHome.vue'

import EditAvatar from '../views/user/EditAvatar.vue'
import EditAccount from '../views/user/EditAccount.vue'
import EditPwd from '../views/user/EditPwd.vue'
import EditPhone from '../views/user/EditPhone.vue'

import Friend from '../views/friend/Friend.vue'
import Black from '../views/friend/Black.vue'
import Moments from '../views/friend/Moments.vue'

import UserArticleList from '../views/user/UserArticleList.vue'
import ReadHistory from '../views/user/ReadHistory.vue'
import Favorite from '../views/favorite/Favorite.vue'

import store from '../store'

Vue.use(VueRouter)
const routes = [
  {
    path: '/h',
    name: 'HelloWorld',
    component: HelloWorld
  },
  {
    path: '/articleList',
    name: 'ArticleList',
    component: ArticleList
  },
  {
    path: '/',
    name: 'Main',
    component: Main
  },
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/article',
    name: 'ArticleDetail',
    component: ArticleDetail
  },
  {
    path: '/laos',
    name: 'Laos',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/home/Laos.vue')
  },
  {
    path: '/upload',
    name: 'Upload',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../components/Upload.vue')
  },
  {
    path: '/test',
    name: 'Test',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Test.vue')
  },
  {
    path: '/search',
    name: 'Search',
    component: Search
  },
  {
    path: '/reward',
    name: 'Reward',
    component: Reward
  },
  {
    path: '/edit',
    name: 'Edit',
    component: Edit
  },
  {
    path: '/logon',
    name: 'Logon',
    component: Logon
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/register',
    name: 'Register',
    component: Register
  },
  {
    path: '/mine',
    name: 'Mine',
    component: Mine
  },
  {
    path: '/userInfo',
    name: 'UserInfo',
    component: UserInfo
  },
  {
    path: '/userHome',
    name: 'UserHome',
    component: UserHome
  },
  {
    path: '/editAvatar',
    name: 'EditAvatar',
    component: EditAvatar
  },
  {
    path: '/editAccount',
    name: 'EditAccount',
    component: EditAccount
  },
  {
    path: '/editPwd',
    name: 'EditPwd',
    component: EditPwd
  },
  {
    path: '/editPhone',
    name: 'EditPhone',
    component: EditPhone
  },
  {
    path: '/friend',
    name: 'Friend',
    component: Friend
  },
  {
    path: '/black',
    name: 'Black',
    component: Black
  },
  {
    path: '/userArticleList',
    name: 'UserArticleList',
    component: UserArticleList
  },
  {
    path: '/favorite',
    name: 'Favorite',
    component: Favorite
  },
  {
    path: '/readHistory',
    name: 'ReadHistory',
    component: ReadHistory
  },
  {
    path: '/moments',
    name: 'Moments',
    component: Moments
  }
]

const router = new VueRouter({
  // mode: 'history',
  base: process.env.BASE_URL,
  routes,
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return {
        x: 0,
        y: 0
      }
    }
  }
})

// 路由守卫
router.beforeEach((to, from, next) => {
  console.log(store.state.token)
  // to: Route: 即将要进入的目标 路由对象
  // from: Route: 当前导航正要离开的路由
  // next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
  const route = [
    'UserInfo',
    'EditAvatar',
    'EditAccount',
    'EditPhone',
    'EditPwd'
  ]
  let isLogin = false // 是否登录
  if (!store.state.user) {
    isLogin = false
  } else {
    isLogin = store.state.user.token
  }
  console.log('isLogin', isLogin, to.name)
  // 未登录状态；当路由到route指定页时，跳转至login
  if (route.indexOf(to.name) >= 0) {
    if (!isLogin) {
      router.push({ path: '/login' })
    }
  }
  next()
})

export default router
